package myJs.cps

import myJs.Implicits._
import myJs.myPkg.jquery._
import org.scalajs.dom.{Event, html}
import slinky.core._
import slinky.core.annotations.react
import slinky.core.facade.{React, ReactElement}
import slinky.web.html._

import scala.scalajs.js

/**
 * Created by yz on 21/1/2022
 */
@react object InputInlineCp  {

  case class Props(name: String, hasBv: Boolean = false, formJq: JQuery = $("#form"),
                   readOnly: Boolean = false, placeHolder: String = "", hasGroup: Boolean = true, show: Boolean = true,
                   labelWidth: Int = 4, label: String, questionInfo: String = "", inputWidth: Int = 8,
                   value: js.UndefOr[String] = js.undefined, onChange: js.UndefOr[String => Unit] = js.undefined)

  val component = FunctionalComponent[Props] { props =>

    val classNameStr = if (props.hasGroup) "form-group" else ""
    val displayStr = if (props.show) Display.block else Display.none
    div(style := Style(display = displayStr), className := classNameStr,
      label(className := s"control-label col-sm-${props.labelWidth}",
        s"${props.label}",
        if (props.questionInfo.nonBlank) {
          span(className := "",
            a(`type` := "button", className := "selfQuestion", title := "说明", data - "container" := "body",
              data - "toggle" := "popover", data - "html" := "true",
              data - "placement" := "left",
              data - "content" := props.questionInfo,
              data - "trigger" := "hover",
              i(className := "fa fa-question-circle-o")
            ),
          )
        } else null, ":"
      ),
      div(className := s"col-sm-${props.inputWidth}",
        PureInputCp(name = props.name, readOnly = props.readOnly, value = props.value,
          onChange = props.onChange, hasBv = props.hasBv)
      )
    )

  }

}
